<template>
  <div class="min-h-screen bg-gray-50 py-8 px-4">
    <!-- 移除container类，使用w-full确保100%宽度 -->
    <div class="bg-white w-full max-w-md mx-auto rounded-xl shadow-md overflow-hidden">
      <!-- 页面标题 -->
      <div class="header-box py-5 text-center bg-gradient-to-r from-blue-500 to-blue-700">
        <h1 class="text-3xl font-bold text-white">饿了么用户注册</h1>
      </div>

      <!-- 注册表单 -->
      <div class="p-4 md:p-6">
        <div class="space-y-4">
          <!-- 手机号码 -->
          <div>
            <label class="block text-gray-700 font-medium mb-1">手机号码</label>
            <!-- 添加max-w-full确保不溢出 -->
            <input
                v-model="formData.phone"
                type="tel"
                class="w-full max-w-full px-4 py-3 border border-gray-300 rounded-lg focus:border-blue-500 focus:ring focus:ring-blue-200 transition duration-200"
                placeholder="请输入您的手机号码"
            >
          </div>

          <!-- 密码 -->
          <div>
            <label class="block text-gray-700 font-medium mb-1">密码</label>
            <input
                v-model="formData.password"
                type="password"
                class="w-full max-w-full px-4 py-3 border border-gray-300 rounded-lg focus:border-blue-500 focus:ring focus:ring-blue-200 transition duration-200"
                placeholder="请输入密码"
            >
          </div>

          <!-- 确认密码 -->
          <div>
            <label class="block text-gray-700 font-medium mb-1">确认密码</label>
            <input
                v-model="formData.confirmPassword"
                type="password"
                class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:border-blue-500 focus:ring focus:ring-blue-200 transition duration-200"
                placeholder="请再次输入密码"
            >
          </div>

          <!-- 用户姓名 -->
          <div>
            <label class="block text-gray-700 font-medium mb-1">用户姓名</label>
            <input
                v-model="formData.name"
                type="text"
                class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:border-blue-500 focus:ring focus:ring-blue-200 transition duration-200"
                placeholder="请输入您的姓名"
            >
          </div>

          <!-- 性别选择 -->
          <div>
            <label class="block text-gray-700 font-medium mb-2">性别</label>
            <div class="flex space-x-6">
              <label class="flex items-center">
                <input
                    v-model="formData.gender"
                    type="radio"
                    name="gender"
                    class="h-4 w-4 text-blue-600"
                    value="male"
                    checked
                >
                <span class="ml-2 text-gray-700">男</span>
              </label>
              <label class="flex items-center">
                <input
                    v-model="formData.gender"
                    type="radio"
                    name="gender"
                    class="h-4 w-4 text-blue-600"
                    value="female"
                >
                <span class="ml-2 text-gray-700">女</span>
              </label>
            </div>
          </div>
        </div>

        <!-- 注册按钮 -->
        <button
            @click="register"
            class="register-btn w-full mt-8 py-4 text-white font-bold rounded-lg text-lg bg-gradient-to-r from-green-500 to-green-600 hover:from-green-600 hover:to-green-700 transition duration-300 transform hover:-translate-y-1 shadow-md"
        >
          立即注册
        </button>

        <!-- 登录链接 -->
        <div class="text-center mt-4">
          <span class="text-gray-600">已有账号？</span>
          <a href="#" class="text-blue-600 font-medium hover:underline">立即登录</a>
        </div>
      </div>

      <FooterNav />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import FooterNav from '@/components/FooterNav.vue';

const router = useRouter();

// 表单数据使用 ref 创建响应式对象
const formData = ref({
  phone: '',
  password: '',
  confirmPassword: '',
  name: '',
  gender: 'male'
});

// 表单验证函数
const validateForm = () => {
  // 手机号验证
  if (!formData.value.phone || !/^1[3-9]\d{9}$/.test(formData.value.phone)) {
    alert('请输入有效的手机号码');
    return false;
  }

  // 密码验证
  if (!formData.value.password || formData.value.password.length < 6) {
    alert('密码长度至少为6位');
    return false;
  }

  // 确认密码验证
  if (formData.value.password !== formData.value.confirmPassword) {
    alert('两次输入的密码不一致');
    return false;
  }

  // 姓名验证
  if (!formData.value.name) {
    alert('请输入您的姓名');
    return false;
  }

  return true;
};

// 注册处理函数
const register = () => {
  // 表单验证
  if (!validateForm()) {
    return;
  }

  // 注册逻辑（模拟）
  console.log('注册信息:', formData.value);
  alert('注册成功！');

  // 实际应用中这里会是API请求
  // axios.post('/api/register', formData.value).then(...)

  // 注册成功后跳转到登录页面
  router.push('/login');
};
</script>


<style scoped>
/* 如果需要，可以在这里添加组件作用域的样式 */
.container {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
</style>